<template>
    <div>
        <pagetitle></pagetitle>
        <!-- <div v-if="teamMsg.certified < 1 || isUpdate"> -->
        <div>
            <el-card class="teamcertificationtop">
                <div class="teamcertificationtopbody">
                    <img src="@/assets/images/icon/teamcertificationimg.png" class="teamcertificationimg" alt="" srcset="" />
                    <div class="teamcertificationtopright">
                        <div>还差一步即可完成 实名认证</div>
                        <span>团队信息仅用于进行登记，不会泄露您的任何证件信息。</span>
                    </div>
                </div>
            </el-card>
            <el-card>
                <el-form :model="pageData" class="formbox" label-width="140px" label-position="right">
                    <div class="formboxitem">
                        <div class="title">团队主体信息</div>
                        <el-form-item label="团队名称：">
                            <div class="selectorbtn">
                                <el-input v-model="pageData.teamName" disabled class="inputs" placeholder="团队名称"></el-input>
                            </div>
                            <span class="formTip">* 认证我是 法定代表人 或 授权管理员 的团队。</span>
                        </el-form-item>
                        <el-form-item label="团队简称：">
                            <el-input v-model="pageData.nameForShort" class="inputs" placeholder="请输入团队简称"></el-input>
                        </el-form-item>
                    </div>
                    <div class="formboxitem">
                        <div class="title">团队标志信息</div>
                        <el-form-item label="上传团队LOGO：">
                            <div>
                                <uploadFile :fileUrl="pageData.teamLogo" :key="pageData.teamLogo" text="上传LOGO" width="180px" height="180px" iconSize="0"></uploadFile>

                                <div class="certificateInputTip" style="margin-top: 10px">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                                <div class="certificateInputTip">● 为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="formboxitem">
                        <div class="title">团队法人信息</div>
                        <el-form-item label="法定代表人姓名：">
                            <el-input v-model="pageData.legalPersonName" disabled class="inputs" placeholder="请输入名字"></el-input>
                        </el-form-item>
                        <el-form-item label="法人联系方式：">
                            <el-input v-model="pageData.legalPersonPhone" disabled class="inputs" placeholder="请输入手机号"></el-input>
                            <span class="formTip">* 联系电话必须为法人本人</span>
                        </el-form-item>
                        <el-form-item label="法人身份证号：">
                            <el-input v-model="pageData.legalPersonIdNum" class="inputs" placeholder="请输入身份证号码"></el-input>
                            <span class="formTip">* 若法定代表人为非中国大陆居民，请填写办理企业证件使用的有效证件号码</span>
                        </el-form-item>
                        <el-form-item label="上传个人证件：">
                            <div>
                                <div class="uploadcertificate">
                                    <div class="uploadcertificateItem">
                                        <uploadFile
                                            :fileUrl="pageData.legalPersonIdFront"
                                            :key="pageData.legalPersonIdFront"
                                            tableItem="legalPersonIdFront"
                                            width="275px"
                                            height="170px"
                                            @callBack="uploadFileUrl"
                                            :showIcon="false"
                                            :showText="false"
                                        ></uploadFile>
                                        <div class="uploadcertificateTitle">居民身份证正面照片</div>
                                    </div>
                                    <div class="uploadcertificateItem">
                                        <uploadFile
                                            :fileUrl="pageData.legalPersonIdBack"
                                            :key="pageData.legalPersonIdBack"
                                            @callBack="uploadFileUrl"
                                            tableItem="legalPersonIdBack"
                                            width="275px"
                                            height="170px"
                                            :showIcon="false"
                                            :showText="false"
                                        ></uploadFile>
                                        <div class="uploadcertificateTitle">居民身份证反面照片</div>
                                    </div>
                                    <div class="uploadcertificateItem">
                                        <uploadFile
                                            :fileUrl="pageData.legalPersonIdInHand"
                                            :key="pageData.legalPersonIdInHand"
                                            @callBack="uploadFileUrl"
                                            tableItem="legalPersonIdInHand"
                                            width="275px"
                                            height="170px"
                                            :showIcon="false"
                                            :showText="false"
                                        ></uploadFile>
                                        <div class="uploadcertificateTitle">手持居民身份证正面照片</div>
                                    </div>
                                </div>
                                <div class="certificateInputTip">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                                <div class="certificateInputTip">● 可以添加“云上农场备案、服务申请、服务认证、服务备案”等水 印；但不能遮挡关键信息，例如姓名、证件号。</div>
                                <div class="certificateInputTip">● 为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div>
                                <div class="certificateInputTip" style="color: #f11212; margin-top: 10px">
                                    声明：在整个 <u> 授权 </u> 过程中，该 被授权人 的一切行为，均代表本单位，与本单位的行为具有同等法律效力。本单位将承担该代理人行为的全部法律后果和法律责任。
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="formboxitem">
                        <div class="title">统一社会信用代码信息</div>
                        <el-form-item label="统一社会信用代码：">
                            <el-input v-model="pageData.socialCreditCode" class="inputs" placeholder="请输入团队的组织机构代码"></el-input>
                            <span class="formTip">*统一社会信用认证代码后不可更改，请准确输入</span>
                        </el-form-item>
                        <el-form-item label="统一社会信用证件：">
                            <div>
                                <div class="uploadcertificate">
                                    <div class="uploadcertificateItem uploadcertificateItem1">
                                        <uploadFile
                                            :fileUrl="pageData.socialCreditCard"
                                            :key="pageData.socialCreditCard"
                                            @callBack="uploadFileUrl"
                                            tableItem="socialCreditCard"
                                            width="275px"
                                            height="170px"
                                            :showIcon="false"
                                            :showText="false"
                                        ></uploadFile>
                                    </div>
                                </div>
                                <div class="certificateInputTip">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                                <div class="certificateInputTip">● 可以添加“云上农场备案、服务申请、服务认证、服务备案”等水 印；但不能遮挡关键信息，例如姓名、证件号。</div>
                                <div class="certificateInputTip">● 为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="团队注册地址：">
                            <addRess class="inputs" :value="pageData.address.keyText" :key="pageData.address.keyText" :getAreaData="getAreaData"></addRess>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input v-model="pageData.detailedAddress" class="inputs" placeholder="请输入详细地址"></el-input>
                        </el-form-item>
                    </div>
                    <div class="formboxitem">
                        <div class="title">团队分类信息</div>
                        <el-form-item label="机构类型：">
                            <el-cascader ref="institutionalTypecascader" v-model="pageData.classificationId" class="inputs" placeholder="请选择机构类型" :props="props" @change="institutionTypeChanges"></el-cascader>
                            <span class="formTip">* 参考标准：GB/T 20091-2006 组织机构类型</span>
                        </el-form-item>
                        <el-form-item label="机构级别：" v-if="pageData.classificationId[0] != '12'">
                            <addRess
                                :value="pageData.organizationlevel ? pageData.organizationlevel.keyText : ''"
                                :key="pageData.organizationlevel"
                                :checkStrictly="true"
                                placeholder="请选择机构级别"
                                :getAreaData="getOrganizationlevel"
                                class="inputs"
                            ></addRess>
                        </el-form-item>
                        <div v-else>
                            <el-form-item label="产业分类：">
                                <el-cascader v-model="pageData.industrialClassificationIdsValues" placeholder="请选择产业分类" ref="industrialClassificationcascader" class="inputs" :props="props1" @change="handleChange"></el-cascader>
                            </el-form-item>
                            <!-- 产业分类列表 -->
                            <el-form-item label="" v-if="pageData.industrialClassificationList.length > 0">
                                <div class="classfiy">
                                    <div v-for="(tag, index) in pageData.industrialClassificationList" :key="index">
                                        <el-tag closable @close="handleClose(index)">
                                            {{ tag.industrialName }}
                                        </el-tag>
                                    </div>
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="formboxitem">
                        <div class="title titlesss">
                            申请人位置
                            <div class="right">
                                <div>经度：<el-input v-model="pageData.applicantLon" class="mapdata" placeholder=""></el-input></div>
                                <div>纬度：<el-input v-model="pageData.applicantLat" class="mapdata" placeholder=""></el-input></div>
                            </div>
                        </div>

                        <div class="mars3ds">
                            <mars3d
                                ref="mars3ds"
                                height="100%"
                                :key="mapKey"
                                :teamName="pageData.teamName"
                                :addr="`${pageData.address.valueText}/${pageData.detailedAddress ? pageData.detailedAddress : ''}`"
                                :lng="pageData.applicantLon"
                                :lat="pageData.applicantLat"
                                :editor="true"
                                @getLocation="getLocation"
                            ></mars3d>
                            <!-- <mars3d ref="mars3ds" height="100%"></mars3d> -->
                        </div>
                    </div>
                    <div class="formboxitem">
                        <div class="formboxitemSunmitBtn" @click="applyTeamCertification">{{ isUpdate ? "修改认证" : "申请认证" }}</div>
                    </div>
                </el-form>
            </el-card>
        </div>
        <!-- 认证中 -->
        <div class="submitsuccessfully" v-if="teamMsg.certified == 1 && !isUpdate">
            <div class="contMsg">
                <div class="title">正在审核中</div>
                <img src="../../../assets/images/success.png" alt="" srcset="" />
                <div class="success">团队认证申请 已提交到 <span>平台审核</span></div>
                <div class="tipcg">您已成功提交申请，等待平台审核确认后，开通本团队功能</div>

                <div class="btnBox">
                    <sxnfbtn class="btnzdl" @click="router.back()">返回</sxnfbtn>
                    <sxnfbtn class="btnzdl" @click="isUpdate = true">修改认证</sxnfbtn>
                </div>
            </div>
        </div>
        <!-- 认证中 -->
        <!-- <el-card class="tip" v-if="teamMsg.certified == 1 && !isUpdate">
            <div class="title">正在审核中</div>
            <img src="../../../assets/images/success.png" class="img" alt="" srcset="" />
            <div class="success">团队认证申请 已提交到 <span>平台审核</span></div>
            <div class="tipcg">您已成功提交申请，等待平台审核确认后，开通本团队功能</div>
        </el-card> -->
        <!-- 认证成功 -->
        <el-card class="tip" v-if="teamMsg.certified == 2 && !isUpdate">
            <div class="title">认证完成</div>
            <img src="../../../assets/images/success1.png" class="img" alt="" srcset="" />
            <div class="success">{{ teamMsg.teamName }} 已通过<span> 平台审核</span></div>
            <div class="tipcg">您已成功通过审核，认证完成，开通本团队功能</div>
            <sxnfbtn class="btnzdl" style="margin-top: 20px" @click="modifyauthentication">修改认证</sxnfbtn>
        </el-card>
        <!-- 提交成功后弹窗 -->
        <div class="submitsuccessfully" v-if="submitsuccessfully">
            <div class="contMsg">
                <div class="title">提交成功</div>
                <img src="../../../assets/images/success.png" alt="" srcset="" />
                <div class="success">团队认证申请 已提交到 <span>平台审核</span></div>
                <div class="tipcg">您已成功提交申请，等待平台审核确认后，开通本团队功能</div>

                <sxnfbtn class="btnzdl" @click="closesubmitsuccessfully">知道了</sxnfbtn>
                <!-- <div class="btnzdl" @click="closesubmitsuccessfully">知道了</div> -->
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
// import mars3d from "@/components/mars3d/mars3d.vue";
import mars3d from "@/components/mars3d.vue";
import type { CascaderProps } from "element-plus";
import { ref, reactive, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { applyCertification, getApplyCertification, updateApplyCertification, institutionalType, industrialClassifications, institutionalTypeOne, industrialClassificationsOne } from "@/api/team";
const store = useStore();
const route = useRoute();
const router = useRouter();
const teamMsg = store.getters.mainTeam;
// console.log(teamMsg.certified);
// 获取经纬度坐标
const getLocation = (data: any) => {
    console.log(data, "231231321");
    pageData.applicantLon = String(data.lng);
    pageData.applicantLat = String(data.lat);
};
// (window as any).getSelections = (data: any) => {
//     console.log(data, "231231321");
// };
const mapKey = ref(123);
const pageData: any = reactive({
    teamId: teamMsg.teamId, // 团队ID
    teamName: "", // 团队名称
    nameForShort: "", // 团队简称
    teamLogo: "", // 团队logo
    legalPersonName: "", // 法定代表人姓名
    legalPersonPhone: "", // 法人联系方式
    legalPersonIdNum: "", // 法人身份证号
    legalPersonIdFront: "", // 居民身份证正面照片
    legalPersonIdBack: "", // 居民身份证反面照片
    legalPersonIdInHand: "", // 手持居民身份证正面照片
    socialCreditCode: "", // 统一社会信用代码
    socialCreditCard: "", // 统一社会信用证件
    detailedAddress: "", // 详细地址
    address: "", // 认证团队地址
    classificationId: "", // 机构类型
    organizationlevel: "", // 机构级别
    industrialClassificationIds: [], // 产业分类
    industrialClassificationList: [],
    applicantLon: "", // 团队注册经度
    applicantLat: "", // 团队注册纬度
    industrialClassificationIdsValues: "",
});
// 获取团队认证信息
const getTeamAuthenticationStatus = () => {
    getApplyCertification(store.getters.mainTeamId).then((res) => {
        const data = res.data ? res.data : teamMsg;
        // if (data) {
        pageData.teamName = data.teamName;
        pageData.teamName = data.teamName;
        pageData.nameForShort = data.nameForShort;
        pageData.teamLogo = data.teamLogo;
        pageData.legalPersonName = data.legalPersonName;
        pageData.legalPersonPhone = data.legalPersonPhone;
        pageData.legalPersonIdNum = data.legalPersonIdNum;
        pageData.legalPersonIdFront = data.legalPersonIdFront;
        pageData.legalPersonIdBack = data.legalPersonIdBack;
        pageData.legalPersonIdInHand = data.legalPersonIdInHand;
        pageData.socialCreditCode = data.socialCreditCode;
        pageData.socialCreditCard = data.socialCreditCard;
        pageData.detailedAddress = data.detailedAddress;
        if (data.address && typeof data.address == "string") {
            pageData.address = JSON.parse(data.address);
        }
        pageData.classificationId = data.classificationId;
        // pageData.organizationlevel = JSON.parse(data.organizationlevel);

        if (data.organizationlevel && typeof data.organizationlevel == "string") {
            pageData.organizationlevel = JSON.parse(data.organizationlevel);
        }
        pageData.industrialClassificationIds = data.industrialClassificationIds ? data.industrialClassificationIds : [];
        pageData.industrialClassificationList = data.industrialClassificationList ? data.industrialClassificationList : [];
        pageData.applicantLon = data.applicantLon ? data.applicantLon : "";
        pageData.applicantLat = data.applicantLat ? data.applicantLat : "";
        pageData.certifiedId = data.certifiedId;

        setClassfy();
        setTimeout(() => {
            mapKey.value = new Date().getTime();
        }, 300);
        // }
    });
};
getTeamAuthenticationStatus();
// 机构类型数据懒加载
const props: CascaderProps = {
    label: "type",
    value: "classificationId",
    lazy: true,
    checkStrictly: true,
    lazyLoad(node: any, resolve) {
        const { data, level } = node;
        institutionalType(data.classificationId ? data.classificationId : 0).then((res) => {
            res.data.forEach((v: any) => {
                institutionalType(v.classificationId).then((res1) => {
                    if (res1.data.length == 0) {
                        v.leaf = true;
                    } else {
                        v.leaf = false;
                    }
                });
            });
            setTimeout(() => {
                resolve(res.data);
            }, 500);
        });
    },
};
// 机构类型选择
const institutionalTypecascader: any = ref(null);
const institutionTypeChanges = () => {
    // 选择完毕后关闭下拉框
    institutionalTypecascader?.value.togglePopperVisible();
    console.log(pageData.classificationId[0]);
};
// 产业分类数据懒加载
// const industrialClassificationIdsValues: any = reactive([]);
const props1: CascaderProps = {
    checkStrictly: true,
    label: "industrialName",
    value: "industrialId",
    lazy: true,
    lazyLoad(node: any, resolve) {
        const { data, level } = node;
        industrialClassifications(data.industrialId ? data.industrialId : 0).then((res) => {
            res.data.forEach((v: any) => {
                industrialClassifications(v.industrialId).then((res1) => {
                    if (res1.data.length == 0) {
                        v.leaf = true;
                    } else {
                        v.leaf = false;
                    }
                });
            });
            setTimeout(() => {
                resolve(res.data);
            }, 500);
        });
    },
};
const industrialClassificationcascader: any = ref(null);
// 选择产业分类
const handleChange = (value: any) => {
    let node = industrialClassificationcascader.value.getCheckedNodes()[0];
    setTimeout(() => {
        addindustrialClassificationIds();
        industrialClassificationcascader?.value.togglePopperVisible();
    }, 300);
};
// 添加产业分类
const addindustrialClassificationIds = () => {
    let node = industrialClassificationcascader.value.getCheckedNodes()[0];
    if (node) {
        pageData.industrialClassificationList.push(node.data);
        pageData.industrialClassificationIds.push(node.pathValues[node.pathValues.length - 1]);
    }
};
// 移除产业分类
const handleClose = (i: number) => {
    pageData.industrialClassificationIds.splice(i, 1);
    pageData.industrialClassificationList.splice(i, 1);
};
// 机构级别
const getOrganizationlevel = (data: object) => {
    pageData.organizationlevel = data;
};
// const isAuthentication = ref(false);
const uploadFileUrl = (url: string, target: string) => {
    // console.log(url, target);
    // return;
    pageData[target] = url;
};
const getAreaData = (e: any) => {
    pageData.address = e;
};

// 认证成功后修改认证按钮
const isUpdate = ref(false);
const modifyauthentication = () => {
    isUpdate.value = true;
};
// 认证申请成功弹窗
const submitsuccessfully = ref(false);
const applyTeamCertification = () => {
    if (typeof pageData.address != "string") {
        pageData.address = JSON.stringify(pageData.address);
    }
    if (typeof pageData.organizationlevel != "string") {
        pageData.organizationlevel = JSON.stringify(pageData.organizationlevel);
    }
    if (typeof pageData.location != "string") {
        pageData.location = JSON.stringify(pageData.location);
    }

    pageData.classificationId = pageData.classificationId.length - 1;
    // console.log(123123123);
    // return;
    if (isUpdate.value) {
        // 已申请认证--修改认证
        // submitsuccessfully.value = true;
        // return;

        updateApplyCertification(pageData).then((res: any) => {
            // ElMessage.success("申请成功，请等待管理员审核！");
            submitsuccessfully.value = true;
        });
    } else {
        // submitsuccessfully.value = true;
        // return;
        // 未申请认证--申请认证
        applyCertification(pageData).then((res: any) => {
            // ElMessage.success("申请成功，请等待管理员审核！");
            submitsuccessfully.value = true;
        });
    }
};
// 数据回显，
// 递归查询机构类型
const institutionaltype = (id: number | string) => {
    institutionalTypeOne(id).then((res: any) => {
        let data: any = res.data;
        if (data) {
            if (data.classificationId) {
                pageData.classificationId.unshift(data.classificationId);
            }

            if (data.parentId != 0) {
                institutionaltype(data.parentId);
            }
        }
    });
};
// 递归查询产业分类 industrialClassificationIdsValues
const industrialclassification = (id: number | string, idList: any | [], array: any | []) => {
    industrialClassificationsOne(id).then((res) => {
        const data: any = res.data;
        array.unshift(data.industrialName);
        idList.unshift(data.industrialId);
        if (data.parentId != 0) {
            industrialclassification(data.parentId, idList, array);
        } else {
            pageData.industrialClassificationIds.push(idList[idList.length - 1]);
            // pageData.industrialClassificationList.push(array.join("/"));
        }
    });
};
const setClassfy = () => {
    if (pageData.classificationId) {
        const id: number = pageData.classificationId;
        pageData.classificationId = [];
        pageData.classificationId.length = 0;
        institutionaltype(id);
    }
    if (pageData.industrialClassificationList && pageData.industrialClassificationList.length > 0) {
        let array = pageData.industrialClassificationList;
        array.forEach((v: any, i: any) => {
            industrialclassification(v.industrialId, [], []);
        });
        // console.log(pageData);
    }
};

const closesubmitsuccessfully = () => {
    submitsuccessfully.value = false;
    router.push("/team/teammanagement/menbermanager");
};
</script>
<style lang="scss" scoped>
.teamcertificationtop {
    margin-bottom: 20px;
    .teamcertificationtopbody {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .teamcertificationimg {
            width: 64px;
            margin-right: 20px;
        }
        .teamcertificationtopright {
            div {
                font-size: 16px;
                color: #333333;
            }
            span {
                font-size: 14px;
                color: #666666;
            }
        }
    }
}
.uploadcertificate {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .uploadcertificateItem {
        margin-right: 20px;
        background-repeat: no-repeat;
        background-size: 210px 130px;
        background-position: 50% 20%;
        &:nth-child(1) {
            background-image: url(@/assets/image/card2.png);
        }
        &:nth-child(2) {
            background-image: url(@/assets/image/card1.png);
        }
        &:nth-child(3) {
            background-image: url(@/assets/image/card3.png);
        }
        .uploadcertificateTitle {
            text-align: center;
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
    .uploadcertificateItem1 {
        background-position: 50%;
        background-image: url(@/assets/image/team1.png) !important;
        margin-bottom: 10px;
    }
}

.certificateInputTip {
    color: #666666;
    font-size: 12px;
    line-height: 20px;
}
.mars3ds {
    height: 540px;
    // margin-top: 15px;
}
.mapdata {
    width: 100px;
    margin-right: 20px;
}
.titlesss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px !important;
    .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-weight: 400;
    }
}
.tip {
    text-align: center;
    padding-top: 120px;
    min-height: calc(100vh - 135px);
    .title {
        font-weight: bold;
        font-size: 24px;
        color: #333333;
    }
    .img {
        // width: 72px;
        display: block;
        position: relative;
        height: 72px;
        left: 50%;
        transform: translateX(-50%);
        margin: 70px 0;
        margin-left: 10px;
    }
    .success {
        font-weight: normal;
        font-size: 16px;
        color: #333333;
        margin-top: 38px;
        text-align: center;
        span {
            color: #ff0000;
        }
    }
    .tipcg {
        font-size: 14px;
        color: #999999;
        text-align: center;
        margin-top: 24px;
        padding: 0;
    }
}
.submitsuccessfully {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(51, 51, 51, 0.1);
    z-index: 999;
    .contMsg {
        width: 435px;
        height: 327px;
        background: #ffffff;
        border-radius: 5px 5px 5px 5px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        // transform: scale(0.7);
        .title {
            text-align: center;
            margin-top: 33px;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
        }
        img {
            width: 50px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 38px;
            margin-left: 5px;
        }
        .success {
            font-weight: normal;
            font-size: 16px;
            color: #333333;
            margin-top: 38px;
            text-align: center;
            span {
                color: #ff0000;
            }
        }
        .tipcg {
            font-size: 14px;
            color: #999999;
            text-align: center;
            margin-top: 16px;
            padding: 0;
        }
        .btnBox {
            display: flex;
            justify-content: center;
            align-items: center;
            .btnzdl {
                left: 0;
                transform: translateX(0%);
            }
        }
        .btnzdl {
            width: 100px;
            // height: 47px;
            // background: #299c37;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            // line-height: 47px;
            cursor: pointer;
            margin-top: 30px;
            // font-size: 20px;
            color: #ffffff;
        }
    }
}
.formboxitemSunmitBtn {
    padding: 5px 15px;
    color: #23b14d;
    border-radius: 5px;
    background-color: #f5f7fa;
    cursor: pointer;
    display: inline-block;
    outline: none;
    border: none;
    &:hover {
        background-color: #23b14d;
        color: #f5f7fa !important;
    }
}
</style>
